////////////////// 第一屏 ////////////////////

// 服务调用数-第二行第一个图表-饼状图
var chart121 = echarts.init(document.getElementById('data1_row2_cell1_chart'));
var option121 = {
    // 鼠标经过提示框
    tooltip: {
        trigger: 'item',
        formatter: "{b}: {c}（{d}%）",
        padding: [8,12],
        textStyle:{
          fontFamily: 'nssc',
          fontSize: 18
        }
    },
    // 主内容
    series: [
        {
            type:'pie',
            // 环形
            radius: ['45%', '58%'],
            // 块提示
            label: {
                normal: {
                    show: true,
                    position: 'outside',
                    formatter: '{c}\n{b}',
                    textStyle:{
                      fontFamily: 'nssc',
                      fontSize: '21'
                    }
                },
                emphasis:{
                  textStyle:{
                    fontSize: '24'
                  }
                }
            },
            // 块提示线条
            labelLine: {
                normal: {
                    show: true
                }
            },
            // 最小角度
            minAngle: 10,
            // 数据
            data:[
                {
                  name:'人脸识别',
                  value:0,
                  // 环形颜色
                  itemStyle:{
                    normal:{
                      color: '#3acb89',
                      shadowColor: 'rgba(58,203,137,.2)',
                      shadowBlur: 60,
                      shadowOffsetY: 12
                    }
                  }
                },
                {
                  name:'物体识别',
                  value:0,
                  itemStyle:{
                    normal:{
                      color: '#369ddf',
                      shadowColor: 'rgba(54,157,223,.2)',
                      shadowBlur: 60,
                      shadowOffsetY: 12
                    }
                  }
                }
            ],
            animationDurationUpdate: 1200
        }
    ]
};


// 近1小时服务调用情况-第二行第二个图表-曲线图
var chart122 = echarts.init(document.getElementById('data1_row2_cell2_chart'));
var option122 = {
    // 图例提示
    legend:{
      show:true,
      top: 60,
      data:['人脸识别','物体识别'],
      itemGap: 30,
      textStyle:{
        color: '#6b6b6b',
        fontFamily: 'nssc',
        fontSize: '18'
      }
    },
    // 鼠标经过提示框
    tooltip: {
        trigger: 'axis',
        enterable: true,
        padding: [8,20],
        textStyle:{
          fontFamily: 'nssc',
          fontSize: 18
        },
        axisPointer:{
          type: 'line',
          lineStyle:{
            color: '#d4d7db'
          }
        }
    },
    // 整体位置
    grid: {
      left:'100',
      right:'100',
      top:'120',
      bottom:'50',
      containLabel: true
    },
    // x轴
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            axisLine:{
              lineStyle:{
                color:'#d6d9dd'
              }
            },
            axisTick:{
              show:false
            },
            axisLabel:{
              margin: 15,
              textStyle:{
                color:'#a9afb8',
                fontSize:15
              }
            },
            data : ['09:00','09:10','09:20','09:30','09:40','09:50','10:00'],
        }
    ],
    // y轴
    yAxis : [
        {
            type : 'value',
            axisLine:{
              lineStyle:{
                color:'#d6d9dd'
              }
            },
            axisTick:{
              show:false
            },
            axisLabel:{
              margin: 15,
              textStyle:{
                color:'#a9afb8',
                fontSize:15
              }
            },
            splitLine:{
              show: true,
              lineStyle:{
                color:'#e9eff5'
              }
            }
        }
    ],
    // 主体
    series : [
      // 人脸识别-配置
        {
            name:'人脸识别',
            type:'line',
            // 转角点样式
            itemStyle:{
              normal:{
                color: '#3acb89',
                borderColor: '#3acb89',
                borderWidth: 2
              }
            },
            // 折线样式
            lineStyle:{
              normal:{
                color:'#5ed49f',
                width: 2
              }
            },
            // 填充区域样式
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0, color: 'rgba(58,203,137,0.15)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(58,203,137,0.05)' // 100% 处的颜色
                }], false)
              }
            },
            data:[120, 182, 101, 134, 90, 230, 210]
        },
        // 物体识别-配置
        {
            name:'物体识别',
            type:'line',
            itemStyle:{
              normal:{
                color: '#369ddf',
                borderColor: '#369ddf',
                borderWidth: 2
              }
            },
            lineStyle:{
              normal:{
                color:'#53ace4',
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0, color: 'rgba(83,172,228,0.15)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(83,172,228,0.05)' // 100% 处的颜色
                }], false)
              }
            },
            data:[220, 162, 141, 100, 290, 330, 310]
        }
    ]
};
chart122.setOption(option122);


var yesterdayAll = "0",
    todayAll = "0",
    totalAll = "0";

$(function(){
  getYesterdayAll();
  getTodayAll();
  getTotalAll();
  refreshChart121();

  setInterval(function(){
    refreshChart121();
  },2000);

})

// 获取昨日调用总数
function getYesterdayAll(){
  yesterdayAll = "654";
  setNumber($(".swiper-slide-active .yesterdayAll"),yesterdayAll,68);
}

// 获取今日调用总数
function getTodayAll(){
  todayAll = "6666";
  setNumber($(".swiper-slide-active .todayAll"),todayAll,114);
  if(todayAll > yesterdayAll){
    var $addNum = $(".todayAll em");
    $addNum.show().text(parseInt(todayAll)-parseInt(yesterdayAll));
  }
}

// 获取累计调用总数
function getTotalAll(){
  totalAll = "12345";
  setNumber($(".swiper-slide-active .totalAll"),totalAll,68);
}

// 更新服务调用环形图
function refreshChart121(){
  option121.series[0].data[0].value = Math.floor(Math.random() * 1000);
  option121.series[0].data[1].value = Math.floor(Math.random() * 1000);
  chart121.setOption(option121);
}
